import React, { memo, useEffect, useState } from "react";
import IconGlobal from "../../../../assets/svg/icon-global";
import IconAddress from "../../../../assets/svg/icon_address";
import IconAvatar from "../../../../assets/svg/icon_avatar";
import AppLogin from "../../../app-login";
import { RightWrapper } from "./style";

const HeaderRight = memo(() => {
  const [showPanel, setPanel] = useState(false)
  const [showLogin, setShowLogin] = useState(false)

  // 副作用代码
  useEffect(() => {
    function windowHandleClick() {
      setPanel(false)
    }
    window.addEventListener("click", windowHandleClick, true)

    return (() => {
      window.removeEventListener("click", windowHandleClick, true)
    })

  }, [])

  function profileClickHandle() {
    setPanel(true)
  }

  function loginClickHandle() {
    setShowLogin(true)
  }

  function changeGuanBi(){
    setShowLogin(false)
  }

  return (
    <RightWrapper>
      <div className="btns">
        <span className="login" onClick={loginClickHandle}>登录</span>
        <span className="regier">注册</span>
        <span className="icon-ads">
          <IconAddress></IconAddress>
        </span>
      </div>
      <div className="profile" onClick={profileClickHandle}>
        <IconGlobal></IconGlobal>
        <div className="avatar">
          <IconAvatar></IconAvatar>
        </div>
        {/* 模态框 */}
        {
          showPanel && (
            <div className="panel">
              <div className="top">
                <div className="item register">注册</div>
                <div className="item login">登录</div>
              </div>
              <div className="btm">
                <div className="item">出租房源</div>
                <div className="item">开展体验</div>
                <div className="item">帮助</div>
              </div>
            </div>
          )
        }
      </div>

      {/* showLogin */}
      {
        showLogin && <AppLogin changeGuanBiEmit={changeGuanBi}></AppLogin>
      }
    </RightWrapper>
  );
});

export default HeaderRight;